<template>
	<view>
		<!-- 公众号 -->
		<!-- currentDevice == 'gongzhonghao' -->
		<view v-if="true" class="w-full h-full" style="position: relative">
			<view>
				<gongzhonghao></gongzhonghao>
			</view>
		</view>

		<view v-else class="flex items-center justify-center" style="bottom: 5%; right: 2%" :style="{ ...maxSize }">
			<view v-show="!hiddenMobile" class="w-full h-full" style="position: relative">
				<view v-if="currentDevice == 'pc'" class="content voice flex items-center justify-center w-full h-full"
					style="">
					<!-- <transition name="zoom"> -->
					<view class="flex bgsmall w-full h-full" v-if="miniDialogShow" style="">
						<view class="w-full" style="position: relative">
							<view class="flex items-end justify-center w-full" style="
                                color: #fff;
                                font-size: 14px;
                                position: absolute;
                                bottom: 22px;
                                z-index: 99999999999999999999999;
                            ">
								<view class="flex items-center justify-center bg1" @click="changeType('0')" style="
                                    width: 95px;
                                    height: 52px;
                                    cursor: pointer;
                                ">
									<image style="
                                        width: 18px;
                                        height: 18px;
                                        margin-right: 5px;
                                    " src="@/static/yuyin.png" mode="">
									</image>
									<span>语音</span>
								</view>
								<view class="flex items-center justify-center bg2" @click="changeType('1')" style="
                                    width: 95px;
                                    height: 52px;
                                    cursor: pointer;
                                ">
									<image style="
                                        width: 18px;
                                        height: 18px;
                                        margin-right: 5px;
                                    " src="@/static/chat.png
									" mode=""></image>
									<span>聊天</span>
								</view>
							</view>
						</view>
					</view>
					<!-- </transition> -->

					<!-- <transition name="fade"> -->

					<view v-if="!dialogSmallShow" class="flex-col w-full h-full" style="
                        border-radius: 20px;
                        overflow: hidden;
                        position: relative;
                    ">
						<view class="" @click="changeType('2')" :style="{ color: textDialogShow ? '#333' : '#FFF' }"
							style="
                            cursor: pointer;
                            padding: 10px;
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            z-index: 9999999999;
                        ">
							<text>X</text>
						</view>
						<!-- 问答 -->
						<view class="w-full h-full flex-col textc"
							v-if="textDialogShow == true && miniDialogShow == false"
							style="padding: 16px 16px 12px 16px; z-index: 999999">
							<view class="flex items-center">
								<image style="
                                    width: 36px;
                                    height: 36px;
                                    margin-right: 8px;
                                    border-radius: 50%;
                                " src="../../static/avatar.png" mode="">
								</image>
								<view class="flex-col">
									<text style="
                                        font-size: 14px;
                                        font-weight: bold;
                                        color: #212121;
                                    ">小犇</text>
									<text style="
                                        font-weight: 400;
                                        font-size: 12px;
                                        color: #535363;
                                    ">中犇教育科技服务官</text>
								</view>
							</view>

							<view class="hsc" ref="scrollContainer" style="
                                margin-top: 42px;
                                padding-bottom: 20px;
                                overflow-y: auto;
                            ">
								<conversation :DeviceType="currentDevice" />
							</view>

							<view class="flex-col" style="margin-top: auto">
								<sendinput :DeviceType="currentDevice"></sendinput>
							</view>
						</view>
						<!-- 语音 -->
						<view class="h-full" v-if="
                            textDialogShow == false && miniDialogShow == false
                        ">
							<pcVoice :DeviceType="currentDevice" />
						</view>
					</view>
					<!-- </transition> -->
				</view>
				<!-- 广告机 -->
				<view class="w-full flex items-center AdvertisingMachineContainer voice" style="padding-bottom: 5%"
					v-else-if="currentDevice == 'AdvertisingMachine'">
					<view class="w-full h-full flex items-center" style="position: absolute; inset: 0">
						<!-- <view class="w-full flex items-center justify-center" style="height: 90vh;">
					<SZR class="w-full" SZR_class="advermachineSZR" />
				</view> -->
						<view class="flex-col w-full" v-if="fastSendWrapShow" style="
                            height: 80vh;
                            z-index: 9999999999999999;
                            position: absolute;
                            inset: 0;
                            justify-content: center;
                            padding: 0 3%;
                        ">
							<view class="wxitem" @click="fastSend('中犇教育科技')" style="
                                cursor: pointer;
                                margin-left: auto;
                                color: #fff;
                                padding: 18px 40px;
                                align-self: baseline;
                            ">
								<text>中犇教育科技</text>
							</view>
							<view class="wxitem" @click="fastSend('AI硅基教学智能体')" style="
                                cursor: pointer;
                                margin-right: auto;
                                color: #fff;
                                padding: 18px 40px;
                                align-self: baseline;
                            ">
								<text>AI硅基教学智能体</text>
							</view>
							<view class="wxitem" @click="fastSend('百道云AI无代码开发平台')" style="
                                cursor: pointer;
                                margin-left: auto;
                                color: #fff;
                                padding: 18px 40px;
                                align-self: baseline;
                            ">
								<text>百道云AI无代码开发平台</text>
							</view>
							<view class="wxitem" @click="fastSend('AI校园管理智能体')" style="
                                cursor: pointer;
                                margin-right: auto;
                                color: #fff;
                                padding: 18px 40px;
                                align-self: baseline;
                            ">
								<text>AI校园管理智能体</text>
							</view>
							<view class="wxitem" @click="fastSend('AI人工智能通识课教育')" style="
                                cursor: pointer;
                                margin-left: auto;
                                color: #fff;
                                padding: 18px 40px;
                                align-self: baseline;
                            ">
								<text>AI人工智能通识课教育</text>
							</view>
						</view>

						<!-- <view class="w-full" style="position: absolute;z-index: 999999999;padding:0 20px">
					<conversation></conversation>
				</view> -->
					</view>

					<view class="w-full" style="z-index: 9999999999999999; margin-top: auto">
						<view class="w-full">
							<sendinput :DeviceType="currentDevice"></sendinput>
						</view>
					</view>
				</view>

				<!-- 小程序 -->
				<view class="w-full flex-col voice" v-else style="padding-bottom: 4%; position: relative">
					<img @click="changeHiddenMobile(1)" style="
                        position: absolute;
                        top: 3%;
                        right: 5%;
                        z-index: 9999;
                        width: 30px;
                        height: 30px;
                        cursor: pointer;
                    " src="../../static/close.png" alt="" />
					<!-- <view class="w-full h-full flex items-center" style="position: absolute;inset: 0;">
				<view class="w-full flex items-center justify-center" style="height: 90vh;">
					<SZR class="w-full" SZR_class="voiceSZR" />
				</view>
			</view> -->
					<view class="w-full" style="
                        z-index: 999999999;
                        padding: 0 20px;
                        margin-top: auto;
                        margin-bottom: 30px;
                    ">
						<!-- <conversation :DeviceType='currentDevice'></conversation> -->
					</view>
					<view class="" style="z-index: 99999">
						<view class="w-full">
							<sendinput :DeviceType="currentDevice"></sendinput>
						</view>
					</view>
				</view>

				<view class="" style="position: absolute; inset: 0">
					<SZR SZR_class="miniSZR" :Device="currentDevice" style="width: 100%; height: 100%" />
				</view>
			</view>
			<view v-show="hiddenMobile" class="flex items-center justify-center" @click="changeHiddenMobile()" style="
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                width: 40px;
                height: 40px;
                cursor: pointer;
                z-index: 9999;
            ">
				<!-- <img
                style="width: 40px; height: 40px"
                src="../../static/roboticon.png"
                alt="" /> -->
				<img style="width: 40px; height: 40px;border-radius: 50%;" src="../../static/avatar.png" alt="" />
			</view>
		</view>
	</view>
</template>

<script>
	import conversation from "../../components/conversation.vue";
	import sendinput from "../../components/sendinput.vue";
	import gongzhonghao from "../index/gongzhonghao.vue"
	import {
		getRuntimeEnv
	} from "@/utils/env.js";
	import SZR from "../../components/szrnew.vue";
	import pcVoice from "@/components/pcVoice.vue";
	import {
		useConversationStore
	} from "../../store";
	const conversationStore = useConversationStore();
	export default {
		data() {
			return {
				SZR_SHOW: false,
				PcCode: "",
				userInfo: {},
				miniDialogShow: true,
				textDialogShow: false,
				currentDevice: "",
				fastSendWrapShow: true,
				dialogSmallShow: true,
				bgheight: 0,
				hiddenMobile: false,
				maxSize: {
					width: "300px",
					height: "450px",
					borderRadius: "16px",
					overflow: "hidden",
					position: "fixed",
				},
			};
		},
		components: {
			conversation,
			sendinput,
			SZR,
			pcVoice,
			gongzhonghao
		},
		computed: {
			SuggestList() {
				console.log(conversationStore.message_suggestedList);
				return conversationStore.message_suggestedList;
			},
		},
		onLoad() {
			console.log(window);
			// this.AI_SZR_create()
			this.postMessageToApp({
				type: "initSZR",
			});
		},
		created() {
			console.log(this.isWeiXin());
			this.currentDevice = this.isWeiXin();
			if (this.currentDevice !== "") {
				conversationStore.ChangeDevice(this.currentDevice);
			}
			console.log(this.currentDevice);
		},
		mounted() {
			this.$eventBus.$on("scrollBottom", () => this.scrollBottom());
			this.$eventBus.$on("hiddenWrap", () => {
				this.fastSendWrapShow = false;
			});

			// this.currentDevice = "AdvertisingMachine"
			// this.currentDevice = "pc"
		},
		beforeDestroy() {
			this.$eventBus.$off("sendMessage");
			this.$eventBus.$off("scrollBottom");
			this.$eventBus.$off("hiddenWrap");
		},
		methods: {
			changeHiddenMobile(type = 0) {
				this.hiddenMobile = !this.hiddenMobile;
				console.log("type", type);
				if (type !== 0) {
					this.maxSize = {
						width: "200px",
						height: "350px",
						minHeight: "350px",
						minWidth: "200px",
						borderRadius: "16px",
						overflow: "hidden",
						position: "fixed",
					};
					this.currentDevice = "";
					this.$eventBus.$emit("stopVoice");
				} else {
					this.miniDialogShow = false;
					this.currentDevice = "wx";
					this.maxSize = {
						width: "100%",
						position: "",
						height: "100%",
					};
				}
				window.parent.postMessage({
						action: "changeSize",
						type: type,
					},
					"*"
				);
			},
			scrollBottom() {
				this.$nextTick(() => {
					const container = this.$el.querySelector(".hsc");
					if (container) {
						container.scrollTop = container.scrollHeight;
					}
				});
			},
			detectDevice() {
				const hasTouchScreen =
					navigator.maxTouchPoints > 0 ||
					"ontouchstart" in window ||
					navigator.msMaxTouchPoints > 0;

				// 检查用户代理
				const userAgent = navigator.userAgent.toLowerCase();
				const isMobileUA =
					/phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|blackberry|iemobile|mqqbrowser/i.test(
						userAgent
					);

				// 检查屏幕宽度
				const screenWidth = window.screen.width;
				const isMobileScreen = screenWidth <= 768;

				// 综合判断
				if (hasTouchScreen && isMobileUA && isMobileScreen) {
					return "mobile";
				} else {
					return "pc";
				}
			},
			isWeiXin() {
				var ua = navigator.userAgent.toLowerCase();
				if (window.__wxjs_environment === 'miniprogram') {
					console.log("小程序环境");
					this.maxSize = {
						width: "100%",
						position: "",
						height: "100%",
					};
					return "wx";
				} else if (/MicroMessenger/i.test(navigator.userAgent)) {
					console.log('微信公众号');
					this.maxSize = {
						minHeight: "350px",
						minWidth: "200px",
						overflow: "hidden",

						width: "100%",
						height: "100%",
						position: "",
					}
					return 'gongzhonghao';
				} else {
					const res = this.detectDevice();
					this.bgheight = window.screen.width;
					console.log(
						"window.screen.width：",
						window.screen.width,
						" window.screen.Height：",
						window.screen.height,
						" res：",
						res
					);
					if (res == "pc" && window.screen.width > window.screen.height) {
						return res;
					} else {
						if (
							res == "mobile" &&
							window.screen.width < 768 &&
							window.screen.width < window.screen.height
						) {
							this.hiddenMobile = true;
							this.maxSize = {
								width: "35px",
								height: "35px",
							};
							return "";
						}
						this.maxSize = {
							width: "100%",
							position: "",
							height: "100%",
						};
						return "AdvertisingMachine";
					}
				}
				// }

				// console.log(window, document)
				// if (window !== 'undefined') {
				// 	return "pc"
				// } else {
				// 	var ua = navigator.userAgent.toLowerCase();
				// 	if (ua.match(/MicroMessenger/i) == "micromessenger") {
				// 		console.log("微信公众号环境");
				// 		return 'wx';
				// 	} else {
				// 		return 'AdvertisingMachine'
				// 	}
				// }
			},
			changeType(type) {
				this.maxSize = {
					width: "445px",
					height: "700px",
					minWidth: "345px !important",
					position: "fixed",
					minHeight: "600px !important",
				};
				if (type == 0) {
					this.dialogSmallShow = false;
					this.miniDialogShow = false;
					this.maxSize = {
						...this.maxSize,
						borderRadius: "26px",
						overflow: "hidden",
					};
				} else if (type == 1) {
					this.miniDialogShow = false;
					this.textDialogShow = true;
					this.maxSize = {
						...this.maxSize,
						borderRadius: "26px",
						overflow: "hidden",
					};
					this.dialogSmallShow = false;
				} else {
					this.dialogSmallShow = true;
					this.miniDialogShow = true;
					this.textDialogShow = false;
					this.maxSize = {
						width: "300px",
						height: "450px",
						borderRadius: "16px",
						overflow: "hidden",
						position: "fixed",
					};
					this.$nextTick(() => {
						console.log(
							document.querySelector(".miniSZR .shuziren-chat")
						);
						document.querySelector(".shuziren-chat").style.display =
							"none";
					});
				}
			},

			postMessageToApp(data) {
				parent.postMessage(data, "*");
			},
			scrollToBottom() {
				this.$nextTick(() => {
					const container = this.$refs.scrollContainer;
					if (container) {
						container.scrollTop = container.scrollHeight;
					}
				});
			},
			fastSend(item) {
				this.$eventBus.$emit("sendItem", {
					data: item,
					type: "AM",
				});
			},
			send(item) {
				this.vocieInput = item;
			},
		},
	};
</script>

<style>
	.bgsmall {
		/* background: url('~@/static/smallbg.png') center center / 100% 100% no-repeat; */
		/* background: url("~@/static/bgsmall.png") center center / 100% 100% no-repeat; */
	}

	.bg1 {
		background: url("~@/static/bg1.png") center center / 100% 100% no-repeat;
	}

	.bg2 {
		background: url("~@/static/bg2.png") center center / 100% 100% no-repeat;
	}

	.voice {
		/* background: url('~@/static/voicebgwx.png') center center / 100% 100% no-repeat; */
		height: 100%;
		overflow: hidden;
		/* background-image: url('~@/static/voicebgwx.png'); */
		background-image: url("~@/static/voicebg1.png");
		background-size: cover;
		/* 保持宽高比，完全覆盖容器 */
		background-position: center;
		background-repeat: no-repeat;
	}

	.wxitem {
		background: url("~@/static/wxitem.png") center center / 100% 100% no-repeat;
	}

	.textc {
		background: url("~@/static/textconversion.png") center center / 120% 120% no-repeat;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.zoom-enter-active,
	.zoom-leave-active {
		transition: all 0.3s ease;
		transform-origin: right bottom;
	}

	.zoom-enter,
	.zoom-leave-to {
		transform: scale(0);
		opacity: 0;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	.miniSZR .szg-szr-box {
		position: relative;
		display: flex;
		width: 200px !important;
		height: 300px !important;
		align-items: center;
		padding-top: 40px;
	}

	.voiceSZR .szg-szr-box {
		position: relative;
		display: flex;
		width: 400px !important;
		height: 800px !important;
		align-items: center;
		padding-top: 40px;
	}

	.advermachineSZR .szg-szr-box {
		position: relative;
		display: flex;
		width: 100% !important;
		height: 100% !important;
		align-items: center;
		padding-top: 40px;
	}

	:deep(.miniSZR .szg-szr-box .shuziren-page) {
		min-width: 200px !important;
		min-height: 200px !important;
	}

	:deep(.voiceSZR .szg-szr-box .shuziren-page) {
		min-width: 400px !important;
		min-height: 400px !important;
	}

	.szg-szr-box .shuziren-page {
		min-width: 120px !important;
		min-height: 120px !important;
	}

	.sendicon {
		background: url("~@/static/send.png") center center / 100% 100% no-repeat;
	}

	.sendicon:hover {
		background: url("~@/static/sendactive.png") center center / 100% 100% no-repeat;
	}

	:deep(.AdvertisingMachineContainer .shuziren-chat.is-share-h5) {
		bottom: 33% !important;
	}
</style>